<template>
  <div class="ui_login_mode">
    <div class="login_mobile_number">
      <i class="iconfont icon-shouji"></i>
      <div class="login_input_box">
        <input
          class="login_input"
          type="text"
          placeholder="请输入手机号码"
          maxlength="11"
          v-model="mobileNo"
          @blur="mobileNoInputBlur"
          @input="mobileNoInputChange">
      </div>
    </div>
    <div class="login_password">
      <i class="iconfont icon-Password"></i>
      <div class="login_input_box">
        <input class="login_input" :type="passwordInputType" placeholder="密码" maxlength="16" v-model="loginPassword">
        <div class="login_password_eye">
          <button class="login_password_eye_btn" v-if="isPasswordInput" @click="changePasswordInputType(false, 'text')">
            <i class="iconfont icon-mimayanjingguanbi"></i>
          </button>
          <button class="login_password_eye_btn" v-if="!isPasswordInput"
                  @click="changePasswordInputType(true, 'password')">
            <i class="iconfont icon-mimayincang"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="login_submit">
      <button class="login_btn"
              :class="mobileNoIsValid ? '' : 'disable'"
              :disabled="!mobileNoIsValid"
              @click="login">
        登录
      </button>
    </div>
    <div class="login_mode clearfix">
      <span class="pull-left" @click="forgetPassword">忘记密码</span>
      <span class="pull-right" @click="changeLoginMode">使用短信验证码登录</span>
    </div>
    <ErrorPopup :isError="isError" :errorMessage="errorMessage"></ErrorPopup>
  </div>
</template>

<script type="text/babel">
  import md5 from 'blueimp-md5';
  import ErrorPopup from './ErrorPopup';

  export default {
    name: 'PasswordLogin',
    components: { ErrorPopup },
    data() {
      return {
        mobileNo: '',
        loginPassword: '',
        isError: false,
        errorMessage: '',
        mobileNoIsValid: false,
        isPasswordInput: true,
        passwordInputType: 'password'
      };
    },
    methods: {
      changeLoginMode() {
        this.$emit('onChangeLoginMode', 'smsthis.$router.go(-1);');
      },
      mobileNoInputChange() {

        this.mobileNoIsValid = this.validateMobileNo();

      },
      mobileNoInputBlur() {
        if (!this.validateMobileNo()) {
          this.isError = true;
          this.errorMessage = '请填写正确的手机号码';
          setTimeout(() => {
            this.isError = false;
            this.errorMessage = '';
          }, 3000);
        }
      },
      validateMobileNo() {

        const mobileNoReg = /^[1][34578][0-9]{9}$/;

        return mobileNoReg.test(this.mobileNo);

      },
      changePasswordInputType(isPasswordInput, type) {
        this.isPasswordInput = isPasswordInput;
        this.passwordInputType = type;
      },
      login() {

        if (this.loginPassword && this.validateMobileNo()) {

          const loginInfo = {
            loginMode: 'password',
            mobileNo: this.mobileNo,
            loginPasswordOrSmsCode: md5(this.loginPassword)
          };

          this.$store.dispatch('userLogin', loginInfo).then(() => {
            this.$router.replace('/');
          });

        }

      },
      forgetPassword() {
        this.$router.replace({ name: 'forgetpassword', params: { from: 'login' } });
      }
    }
  };
</script>

<style scoped lang="less">
  .ui_login_mode {
    width: 100%;
    .login_mobile_number,
    .login_password {
      display: flex;
      align-items: center;
      height: 80px;
      margin-bottom: 40px;
      padding: 0 65px;
      .iconfont {
        flex: 0 0 auto;
        margin-right: 10px;
        color: #999;
        font-size: 40px;
      }
    }
    .login_submit {
      margin-bottom: 40px;
      padding: 0 30px;
      .login_btn {
        width: 100%;
        height: 90px;
        outline: none;
        border: none;
        border-radius: 45px;
        background-color: #f7a427;
        color: #fff;
        font-size: 36px;
        &.disable {
          background-color: #fbcb82;
        }
      }
    }
    .login_mode {
      padding: 0 70px;
      color: #333;
      font-size: 26px;
    }
    .login_input_box {
      display: flex;
      flex: 1 0 auto;
      height: 100%;
      border-radius: unset;
      border-bottom: 1px solid #e1e1e1;
      .login_input {
        flex: 1 0 auto;
        height: 100%;
        padding: 20px 0 20px 30px;
        outline: none;
        border: none;
        border-radius: unset;
        background: transparent;
        font-size: 30px;
      }
    }
    .login_password_eye {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      height: 100%;
      .login_password_eye_btn {
        outline: none;
        border: none;
        background-color: transparent;
      }
    }
  }
</style>